<template>
	<view class="container-bg">
		<page-container v-if="isPage"></page-container>
		
		<u-navbar :title="goodsInfo.name" placeholder leftIconColor="#fff" :autoBack="true">
			<template slot="right">
				<isCollect :goodsId="goodsInfo.id"></isCollect>
				<!-- <image class="navber-right" src="@/static/icon/share.png" mode="" /> -->
			</template>
		</u-navbar>

		<view class="goods-image">
			<view class="goods-cover">
				<image :src="goodsInfo.cover" mode="widthFix"></image>
			</view>
		</view>

		<view class="goods-info">
			<view class="bottom bg-theme1 pad-24">
				<view class="font-w-600 color-white font-32">{{goodsInfo.name}}</view>
				<view class="centerY mar-top-20">
					<capsule color="#979797" bgColor="rgba(0,0,0,.1)" :number="goodsInfo.build" title="限量"></capsule>
					<capsule color="#979797" bgColor="rgba(0,0,0,.1)" title="流通"
						:number="goodsInfo.out_cnt - goodsInfo.broken_cnt" class="mar-left-20">
					</capsule>
				</view>
			</view>

			<!-- 盲盒奖品 -->
			<boxPrize :goodsId="goodsInfo.id" v-if="goodsInfo.type == 2"></boxPrize>

			<view class="bg-theme1 pad-24 author mar-top-20">
				<view class="pad-24  centerY betweenX">
					<view class="font-28 font-w-800 color-grey">品牌方</view>
					<view class="font-28 centerY mar-top-10">
						<image v-if="goodsInfo.issuer_info" class="logo" :src="goodsInfo.issuer_info.avatar">
						</image>
						<text v-if="goodsInfo.issuer_info"
							class="mar-left-10 color-white">{{goodsInfo.issuer_info.name}}</text>
					</view>
				</view>
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">创作者</view>
					<view class="font-28 centerY mar-top-10">
						<image v-if="goodsInfo.author_info" class="logo" :src="goodsInfo.author_info.avatar">
						</image>
						<text v-if="goodsInfo.author_info"
							class="mar-left-10 color-white">{{goodsInfo.author_info.name}}</text>
					</view>
				</view>
			</view>

			<view class="betweenX bg-theme1 mar-top-24 pad-top-bottom-32 pad-left-right-24 mar-top-24">
				<view class="font-28">
					<text class="mar-right-20 color-grey">藏品编号</text>
					<text class="font-w-600 color-white">#{{goodsCode.code}}</text>
				</view>
				<view @click="hanldeFlowDoc" class="centerXY font-28 color-grey">查看流转记录 <u-icon class="mar-left-10"
						name="arrow-right" size="12" color="#7a7a7a"></u-icon></view>
			</view>


			<view class="pad-top-bottom-24 bg-theme1 mar-top-24">
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">所属专辑</view>
					<view class="color-white" v-if="goodsInfo.series_info">{{goodsInfo.series_info.name}}</view>
				</view>
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">合约地址</view>
					<view class="centerY">
						<text class="color-white">{{getString(goodsCode.tx_hash)}}</text>

						<setCopy :content="goodsCode.tx_hash">
							<template v-slot:content>
								<image class="copy" src="../../static/icon/copy-dark.png"></image>
							</template>
						</setCopy>
					</view>
				</view>
				<!-- <view class="cell betweenX pad-24 font-28">
					<view class="color-grey">认证标识</view>
					<view>283279</view>
				</view> -->
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">拥有者</view>
					<view class="color-white" v-if="goodsCode.owner_info">{{goodsCode.owner_info.nickname}}</view>
				</view>
			</view>


			<view class="pad-top-bottom-32 pad-left-right-24 bg-theme1 mar-top-24">
				<view class="my-font font-36 color-white">藏品介绍</view>
				<u-parse class="mar-top-24" :content="goodsInfo.desc"></u-parse>
			</view>

			<!-- 购买须知 -->
			<pay-notes></pay-notes>

			<view class="copyright centerX">
				<image src="../../static/icon/copyright.png" mode=""></image>
			</view>
		</view>

		<view class="button-box pad-left-right-32 pad-top-bottom-10 bg-theme1 centerY">
			<view class="button-price font-24 centerY color-theme">
				<view class="font-24">￥</view>
				<view class="font-44">{{data.price}}</view>
			</view>
			<view class="button flex-w font-32" @click="hanldePay">立即购买</view>
		</view>

		<my-popup content="您还没实名认证？" confirmText="去认证" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		realNameAuthInfo,
		marketDetail
	} from '@/config/api.js'
	export default {
		data() {
			return {
				data: {},
				// 编号详情
				goodsCode: {},
				//藏品信息
				goodsInfo: {},
				isCollect: false,
				isPopup: false,
				// navbar背景
				bgColor: "transparent",
				// 购买须知
				purchase_notes: uni.getStorageSync('config').purchase_notes,
				// 显示页面加载
				isPage: false,
			}
		},
		onLoad(options) {
			this.isPage = true;
			this.marketId = options.market_id;
			this.getGoodsSaleInfo().then(res=>{
				this.isPage = false;
			});
		},
		methods: {
			// 跳转流转记录
			hanldeFlowDoc() {
				uni.navigateTo({
					url: '/pages/my/flowDoc?codeId=' + this.goodsCode.id
				})
			},
			// 字符串替换
			getString(text) {
				if (text) {
					return text.replace(/(.{6}).*(.{4})/, "$1********$2")
				}
			},
			// 跳转去其他几首
			hanldeMarketGoodsList(goods_id) {
				uni.navigateTo({
					url: '/pages/market/marketGoodsList?goods_id=' + goods_id
				})
			},
			hanldeCollect() {

			},
			// 跳转去支付
			hanldePay() {
				realNameAuthInfo().then(res => {
					if (res.data.info.status == 2) {
						uni.navigateTo({
							url: '/pages/market/order?market_id=' + this.data.id
						})
					} else {
						this.isPopup = true;
					}
				})
			},
			// 获取详情
			getGoodsSaleInfo() {
				return new Promise((resolve, reject) => {
					marketDetail({
						id: this.marketId
					}).then(res => {
						let {
							info,
							goods_info,
							goods_code_info
						} = res.data;
						
						this.goodsCode = goods_code_info
						this.data = info;
						this.goodsInfo = goods_info;
						resolve();
					})
				})
			},
			// 确认
			hanldeConfirm() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/certification'
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 100) {
				this.bgColor = '#FFFFFF';
			} else {
				this.bgColor = 'transparent'
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-bg {
		background: $uni-bg-black;
		background: url('@/static/image/my-bg.png') no-repeat;
		background-size: 100% 100%;
		width: 751rpx;
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}

	.navber-right {
		width: 48rpx;
		height: 48rpx;
	}

	.goods-image {
		position: relative;

		.goods-bg {
			display: block;
			width: 100%;
			height: 1124rpx;
		}

		.goods-cover {
			width: 100%;
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 100%;
				height: 600rpx;
			}
		}
	}

	.goods-info {
		width: 100%;

		.goods-bg {
			background: linear-gradient(45deg, #eb6569 29%, #ffedd6, #ff3c43);
		}
	}

	.logo {
		display: block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.item {
		background: url('/static/icon/product-builder-bg.png') no-repeat;
		background-size: 100% 100%;
		flex: 1;
	}

	.copy {
		display: block;
		width: 28rpx;
		height: 28rpx;
	}

	.copyright {
		margin: 32rpx 0;
		padding-bottom: 150rpx;

		image {
			width: 329rpx;
			height: 55rpx;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 8rpx;
		}

		.disabled {
			background: $uni-bg-theme;
			opacity: .5;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 8rpx;
		}
	}
</style>